var markers = [];
var map;
var infowindow = new google.maps.InfoWindow;
var styles = [
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry",
        "stylers": [
            {"color": "#ffbb4d"}
        ]
    }, {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {"visibility": "on"},
            {"color": "#ffbb4d "}
        ]
    }, {
        "featureType": "administrative.locality",
        "stylers": [
            {"visibility": "on"}
        ]
    }, {
    }
];
var styledMap = new google.maps.StyledMapType(styles, {name: "Mapa"});

function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

function deleteMarkers() {
  clearMarkers();
  markers = [];
}

function cambiarVista(id) {
    deleteMarkers();
    if (id !== "0") {
        var clase = $("#option_" + id).attr("class");
        var center = new google.maps.LatLng(clase.split(',')[0], clase.split(',')[1]);
        map.setCenter(center);
        map.setZoom(parseInt(map.getZoom()) < 8 ? 8 : map.getZoom());
        prueba(id);
    } else {
        var center = new google.maps.LatLng(-9.276068, -81.6113114);
        map.setCenter(center);
        map.setZoom(5);
    }
}

/** * Crea google maps segun coordenadas ** */
function createMap() {
    var latLng = new google.maps.LatLng(-9.276068, -81.6113114);
    var mapOptions = {
        center: latLng,
        zoom: 5,
        mapTypeControl: true,
        streetViewControl: false,
        scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    /* creación de elemento mapa Google */
    map = new google.maps.Map(document.getElementById("mapaNacional"), mapOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    /* permite ocultar panel lateral al evento click sobre el mapa, no sobre los marcadores */
    google.maps.event.addListener(map, 'click', function () {
        removeClass(controlesMapaId, 'active');
    });
    controlesMapaId.click();
}

function cargaMarkers(stnId, latitud, longitud, title, imagen) {
    var place = new google.maps.LatLng(latitud, longitud);
    var marker = new google.maps.Marker({
        position: place,
        map: map,
        title: title,
        icon: {
            url: imagen
        },
        visible: true
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', function () {
        cargaInfo(marker, stnId, title);
    });
}

function getRegistroTable(lugar) {
    var datos = $.ajax({
        type: "get",
        url: "getdatosairetable",
        data: "lugar=" + lugar,
        async: false
    }).responseText;
    return datos;
}

function getRegistroTableHorarios(lugar) {
    var datos = $.ajax({
        type: "get",
        url: "getdatosairetablehorarios",
        data: "lugar=" + lugar,
        async: false
    }).responseText;
    return datos;
}

function cargaInfo(marker, stnId, textName) {
    var parentNode = document.createElement('div');
    addClass(parentNode, 'popupInfo');

    var titleNode = document.createElement('h1');
    titleNode.appendChild(document.createTextNode(textName));

    /*var a = document.createElement('a');
     var linkText = document.createTextNode("ver ficha");
     a.appendChild(linkText);
     a.title = "Ir a ficha";
     a.href = "#";
     a.target = "_blank";
     addClass(a, 'ficha');*/

    var tabla = document.createElement('div');
    tabla.innerHTML = getRegistroTable(stnId);

    var tablahorarios = document.createElement('div');
    tablahorarios.innerHTML = getRegistroTableHorarios(stnId);

    var b = document.createElement('a');
    var linkDescargaB = document.createTextNode("niveles");
    b.appendChild(linkDescargaB);
    b.href = "javascript:showNiveles();";
    addClass(b, 'graficos');

    var c = document.createElement('a');
    var linkDescargaC = document.createTextNode("concentraciones horarias");
    c.appendChild(linkDescargaC);
    c.href = "javascript:showHorarios();";
    addClass(c, 'descarga');

    var d = document.createElement('a');
    var linkDescargaD = document.createTextNode("descargar PDF");
    d.appendChild(linkDescargaD);
    d.href = '#';
    addClass(d, 'download');

    var cleanDiv = document.createElement('div');
    addClass(cleanDiv, 'break');
    var cleanDiv2 = cleanDiv.cloneNode(true);

    var halfWidth = document.createElement('div');
    addClass(halfWidth, 'half');
    var halfWidth2 = halfWidth.cloneNode();
    addClass(halfWidth2, 'step');

    var tab1 = document.createElement('div');
    var tab2 = document.createElement('div');
    tab1.setAttribute('id', 'tab1');
    tab2.setAttribute('id', 'tab2');
    addClass(tab2, 'hidden');

    /**
     * Creacion de graficos por cada nodo DIV
     */
    var nodePM25 = document.createElement('div');
    createGraphs(nodePM25, stnId, 'MP2_5', 'MP2_5', true);

    var nodePM10 = document.createElement('div');
    createGraphs(nodePM10, stnId, 'MP10', 'MP10', true);

    var node0001 = document.createElement('div');
    createGraphs(node0001, stnId, 'SO2', 'SO2', true);

    var node0003 = document.createElement('div');
    createGraphs(node0003, stnId, 'NO2', 'NO2', true);

    var node0004 = document.createElement('div');
    createGraphs(node0004, stnId, 'CO', 'CO', true);

    var node0008 = document.createElement('div');
    createGraphs(node0008, stnId, 'O3', 'O3', true);
    /*
     ********************************************
     ********************************************
     */

    parentNode.appendChild(titleNode);
    //parentNode.appendChild(a);
    parentNode.appendChild(b);
    parentNode.appendChild(c);
    parentNode.appendChild(d);
    parentNode.appendChild(cleanDiv);
    halfWidth.appendChild(nodePM25);
    halfWidth.appendChild(nodePM10);
    halfWidth.appendChild(node0001);
    halfWidth.appendChild(node0003);
    halfWidth.appendChild(node0004);
    halfWidth.appendChild(node0008);
    halfWidth2.appendChild(tabla);
    tab1.appendChild(halfWidth);
    tab1.appendChild(halfWidth2);
    tab2.appendChild(tablahorarios);
    parentNode.appendChild(tab1);
    parentNode.appendChild(tab2);
    parentNode.appendChild(cleanDiv2);

    map.panTo(marker.getPosition());

    infowindow.close();
    infowindow.setContent(parentNode);
    infowindow.open(map, marker);
    removeClass(document.getElementById('controlesMapaId'), 'active');
}

function showNiveles() {
    var tab1 = document.getElementById('tab1');
    var tab2 = document.getElementById('tab2');
    removeClass(tab1, 'hidden');
    addClass(tab2, 'hidden');
}
function showHorarios() {
    var tab1 = document.getElementById('tab1');
    var tab2 = document.getElementById('tab2');
    removeClass(tab2, 'hidden');
    addClass(tab1, 'hidden');
}

function createGraphs(node, stnId, tipo, title, ejeX) {

    var datos = JSON.parse($.ajax({
        type: "GET",
        url: "getdatosaire",
        data: "lugar=" + stnId + "&tipo=" + tipo,
        async: false,
        dataType: "json"
    }).responseText);
    if (datos === undefined || datos.status !== 0)
        return;
    var data = new google.visualization.DataTable(datos.info);
    var eje;
    var horas;
    var altura;
    if (ejeX) {
        eje = {
            'textPosition': 'none',
            'baselineColor': '#ccc',
            'gridlines': {
                'color': 'transparent'
            }
        };
        horas = {
            'textPosition': 'out',
            'allowContainerBoundaryTextCufoff': true,
            'baselineColor': 'transparent',
            'gridlines': {
                'color': 'transparent'
            }
        };
        altura = 30;
    } else {
        eje = {
            'textPosition': 'none',
            'baselineColor': 'transparent',
            'gridlines': {
                'color': 'transparent'
            }
        };
        horas = {
            'textPosition': 'none',
            'baselineColor': 'transparent',
            'gridlines': {
                'color': 'transparent'
            }
        };
        altura = 30;
    }

    var options = {
        'title': null,
        'width': 200,
        'height': altura,
        'title': title,
                'titlePosition': 'in',
        'tooltip': {
            'trigger': 'focus',
            'isHtml': true
        },
        'legend': {
            'position': 'none'
        },
        'chartArea': {'width': '100%', 'height': '100%'},
        'hAxis': horas,
        'vAxis': eje,
        'charArea': {
            'top': 0,
            'right': 0,
            'bottom': 0,
            'left': 0
        }
    };

    var chart = new google.visualization.ColumnChart(node);
    chart.draw(data, options);
}

function actualizacionEstaciones(el) {
    if ($("#" + el.id).attr("checked") === "checked") {
        $("#" + el.id).removeAttr("checked");
    } else {
        $("#" + el.id).attr("checked", "checked");
    }
    cambiarVista($("#region").val());
}

function prueba(depa) {

    var selectedStatus_bueno = $("#condiciones1").attr("checked") === undefined ? false : true;
    var selectedStatus_regular = $("#condiciones2").attr("checked") === undefined ? false : true;
    var selectedStatus_malo = $("#condiciones3").attr("checked") === undefined ? false : true;
    var selectedStatus_pesimo = $("#condiciones4").attr("checked") === undefined ? false : true;

    $.ajax({
        url: "getAllLugar",
        data: "departamento=" + depa + "&bueno=" + selectedStatus_bueno + "&regular=" + selectedStatus_regular + "&malo=" + selectedStatus_malo + "&pesimo=" + selectedStatus_pesimo,
        type: "GET",
        async: false,
        success: function (response, status, xhlr) {
            if (response !== undefined && response.length > 0) {
                $.each(response, function (indice, val) {
                    var imagen = "";
                    if (val.estado === "B") {
                        imagen = "images/bueno.png";
                    } else if (val.estado === "R") {
                        imagen = "images/regular.png";
                    } else if (val.estado === "M") {
                        imagen = "images/malo.png";
                    } else if (val.estado === "P") {
                        imagen = "images/pesimo.png";
                    } else {
                        imagen = "images/sindatos.png";
                    }
                    cargaMarkers(val.id, val.coordenadax, val.coordenaday, val.titulo, imagen);
                });
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("ERROR al obtener los lugares con la calidad del aire");
        }
    });
}

google.load("visualization", "1", {packages: ["corechart"]});
google.maps.event.addDomListener(window, 'load', createMap);